<div class="comment">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" class="tablist-first">评论设置</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">评论列表</a></li>
    <div class="comment-option">
      <button type="button" class="btn btn-primary" id="comment-add">新增</button>
      <button type="button" class="btn btn-danger" id="comment-batch-del">批量删除</button>
    </div>
  </ul>

  <div class="tab-content">
    <!-- 评论设置 -->
    <div role="tabpanel" class="tab-pane active comment-informaiton" id="home">
      <div class="comment-table">
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>编号</th>
              <th>文章标题</th>
              <th>所属栏目</th>
              <th>作者</th>
              <th>发布时间</th>
              <th>阅读次数</th>
              <th>评论状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
             <!-- <tr>
              <td><input type="checkbox" value=""></td>
              <td>抗击疫情，中国在行动</td>
              <td>抗击肺炎</td>
              <td>黄河大合唱</td>
              <td>王娜</td>
              <td>2020-03-02</td>
              <td>385</td>
              <td>
                <input class="input-btn" type="button" value="已通过" data-v="未审核" onclick="var s=this.value;this.value=this.dataset.v;this.dataset.v=s;"/>
              </td>
            </tr>      -->    
          </tbody>
        </table>

        <!-- 分页 -->
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li>
              <a href="#" aria-label="Previous" class="paging">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <!-- <li><a href="#">1</a></li> -->
            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
            <!-- <li id="paging-one"><a href="#">1</a></li> -->
            <li id="paging-two"><a href="#" class="paging">2</a></li>
            <li id="paging-three"><a href="#" class="paging">3</a></li>
            <li id="paging-four"><a href="#" class="paging">4</a></li>
            <li id="paging-five"><a href="#" class="paging">5</a></li>
            <li>
              <a href="#" aria-label="Next" class="paging">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <!-- 评论列表 -->
    <div role="tabpanel" class="tab-pane comment-informaiton" id="profile">
      <div class="comment-table">
        <table class="table table-striped table-bordered ctltable">
          <thead>
            <tr>
              <th>编号</th>
              <th>所属文章</th>
              <th>评论内容</th>
              <th>评论者</th>
              <th>评论时间</th>
              <th>评论状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr>
              <td><input type="checkbox" value="id=187"></td>
              <td>抗击肺炎</td>
              <td>抗击疫情，中国在行动</td>
              <td>王娜</td>
              <td>2020-03-02 21:05:30</td>
              <td>
                <input class="input-btn" type="button" value="已通过" data-v="未审核" onclick="var s=this.value;this.value=this.dataset.v;this.dataset.v=s;"/>
              </td>
              <td>
                <span class="comment-delete"><i class="fa fa-trash-o fa-lg" title="删除"></i></span>
              </td>
            </tr> -->            
          </tbody>
        </table>

        <!-- 分页 -->
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li>
              <a href="#" aria-label="Previous" class="paging">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <!-- <li><a href="#">1</a></li> -->
            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
            <!-- <li id="paging-one"><a href="#">1</a></li> -->
            <li id="paging-two"><a href="#" class="paging">2</a></li>
            <li id="paging-three"><a href="#" class="paging">3</a></li>
            <li id="paging-four"><a href="#" class="paging">4</a></li>
            <li id="paging-five"><a href="#" class="paging">5</a></li>
            <li>
              <a href="#" aria-label="Next" class="paging">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

  </div>

  <!-- 模态框 -->
  <div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="comment-modalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="comment-modalLabel">添加评论</h4>
        </div>
        <div class="modal-body">
          <!-- 表单 -->
          <form class="form-horizontal">
            <div class="form-group">
              <label for="comment-title" class="col-sm-2 control-label">文章标题</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="comment-title" placeholder="请输入文章标题">
              </div>
            </div>
            <div class="form-group">
              <label for="comment-parent" class="col-sm-2 control-label">所属栏目</label>
              <div class="col-sm-10">
                <select id="comment-parent" class="form-control">
                  <!-- 遍历一级栏目 -->
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="comment-username" class="col-sm-2 control-label">作&nbsp;&nbsp;&nbsp;&nbsp;者</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="comment-username" placeholder="请输入作者名称">
              </div>
            </div>
            <div class="form-group">
              <label for="comment-nickname" class="col-sm-2 control-label">评论者</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="comment-nickname" placeholder="请输入文章的评论者">
              </div>
            </div>
            <div class="form-group">
              <label for="comment-publishtime" class="col-sm-2 control-label">发布时间</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="comment-publishtime" placeholder="请输入发布时间">
              </div>
            </div>
            <div class="form-group">
              <label for="comment-commenttime" class="col-sm-2 control-label">评论时间</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="comment-commenttime" placeholder="请输入评论时间">
              </div>
            </div>
            <div class="form-group">
              <label for="comment-readtimes" class="col-sm-2 control-label">阅读次数</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="comment-readtimes" placeholder="请输入阅读次数">
              </div>
            </div>
            <div class="form-group">
              <label for="comment-content" class="col-sm-2 control-label">评论内容</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="comment-content" placeholder="请输入评论内容">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button id="comment-save" type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>

</div>

<script>
  //当前页面的所有文章数据
  var commentData = [];
  // 当前修改的文章栏目对象
  var currentComment = {};
  
  findPage();
  function findPage(){
    $('#home tbody').empty();
    myAjax('/manager/comment/findComment','get',{page:0,pageSize:11},function(res){
      //console.log(res.data.list);
      commentData = res.data.list;
      res.data.list.forEach(function(item){
        //console.log(item);
        var $tr = $(`
          <tr>
            <td><input type="checkbox" value="`+ item.id +`"></td>
            <td>`+ (item.article ? item.article.title : 'null') +`</td>
            <td>`+ item.content + `</td>
            <td>`+(item.customer?item.customer.username : 'null')+`</td>
            <td>`+ (item.article ? item.article.publishtime : 'null') + `</td>
            <td>`+ (item.article ? item.article.readtimes : 'null') +`</td>
            <td>`+ item.status +`</td>
            <td>
              <span class="comment-delete">
								<i class="fa fa-trash-o" title="删除"></i>
							</span>
							<span class="comment-edit">
								<i class="fa fa-pencil-square-o" title="修改"></i>
							</span>
            </td>
          </tr>
        `);
        //console.log($tr);
        $('#home tbody').append($tr);
      })

      //设置模态框中的父栏目遍历，清空下拉列表，追加option
      var parent = res.data.list.filter(function (item) {
        return item.content;
        //console.log(item.content);
      });
      $('#comment-parent').empty();
      $('#comment-parent').append('<option value="">请选择</option>');
      parent.forEach(function (item) {
        var $option = $('<option value="' + item.id + '">' + item.content + '</option>');
        //console.log($option);
        $('#comment-parent').append($option);
      });


    },function(err){
      alert('接收数据失败！请检查后台端口是否就开启')
    })

  }

  findPage1();
  function findPage1(){
    $('#profile tbody').empty();
    myAjax('/manager/comment/findComment','get',{page:0,pageSize:10},function(res){
      //console.log(res.data.list);
      commentData = res.data.list;
      res.data.list.forEach(function(item){
        //console.log(item);
        var $tr = $(`
          <tr>
            <td><input type="checkbox" value="`+ item.id +`"></td>
            <td>`+ (item.article ? item.article.title : 'null') +`</td>
            <td>`+ (item.article ? item.article.content : 'null') +`</td>
            <td>`+(item.customer?item.customer.nickname : 'null')+`</td>
            <td>`+ item.commenttime +`</td>
            <td>`+ (item.article ? item.article.status : 'null')  +`</td>
            <td>
              <span class="comment-delete">
								<i class="fa fa-trash-o" title="删除"></i>
							</span>
							<span class="comment-edit">
								<i class="fa fa-pencil-square-o" title="修改"></i>
							</span>
            </td>
          </tr>
        `);
        //console.log($tr);
        $('#profile tbody').append($tr);
      })
    },function(err){
      alert('接收数据失败！请检查后台端口是否就开启')
    })

  }

  //新增
  $('#comment-add').click(function(){
    currentComment = {};
    $('#comment-title').val('');
    $('#comment-parent').val('');
    $('#comment-username').val('');
    $('#comment-nickname').val('');
    $('#comment-publishtime').val('');
    $('#comment-commenttime').val('');
    $('#comment-readtimes').val('');
    $('#comment-content').val('');
    //设置模态框标题
    $('#comment-modalLabel').text('新增评论');
    //显示模态框
    $('#comment-modal').modal('show');
  })

  // 修改  事件代理   设置模态框标题，设置内部表单内容，显示模态框
  $('.comment-table').on('click', '.comment-edit', function () {
    var id = $(this).closest('tr').find('[type=checkbox]').val();
    // 通过id获取当前修改的对象，要去所有的栏目数组中进行过滤
    currentComment = commentData.filter(function (item) {
      return item.id == id;
    })[0];
    //console.log(currentComment.id);
    //console.log(commentData);
    //console.log(currentComment);
    //将栏目对象中的数据设置到表单中
    $('#comment-title').val(currentComment.article ? currentComment.article.title : 'null');
    //**父栏目默认值获取未实现**
    $('#comment-parent').val('');
    $('#comment-username').val(currentComment.customer ? currentComment.customer.username : 'null');
    $('#comment-nickname').val(currentComment.customer ? currentComment.customer.nickname : 'null');
    $('#comment-publishtime').val(currentComment.article ? currentComment.article.publishtime : 'null');
    $('#comment-commenttime').val(currentComment.commenttime);
    $('#comment-readtimes').val(currentComment.article ? currentComment.article.readtimes : 'null');
    $('#comment-content').val(currentComment.article ? currentComment.article.content : 'null');

    $('#comment-modalLabel').text('修改评论');
    $('#comment-modal').modal('show');
  })

  //保存
  $('#comment-save').click(function(){
    //获取表单数据
    var id = $(this).closest('tr').find('[type=checkbox]').val();
    var title = $('#comment-title').val();
    var parent = $('#comment-parent').val();
    var username = $('#comment-username').val();
    var nickname = $('#comment-nickname').val();
    var publishtime = $('#comment-publishtime').val();
    var commenttime = $('#comment-commenttime').val();
    var readtimes = $('#comment-readtimes').val();
    var content = $('#comment-content').val();
    //验证数据
    if(title){
      var obj = {
        id: currentComment.id,
        content: parent,
        title: title,
        username: username,
        nickname: nickname,
        publishtime: publishtime,
        commenttime: commenttime,
        readtimes: readtimes,
        //content: content
      }
      myAjax('/manager/comment/saveOrUpdateComment','post',obj,function(res){
        if(res.status == 200){
          //console.log(obj);
          findPage();
          findPage1();
          alert('保存成功')
          $('#comment-modal').modal('hide');
        }else{
          alert('保存出错了，请检查后台数据库是否连接成功！');
          $('#comment-modal').modal('hide');
        }

      },function(err){
        alert('保存出错了，请检查后台数据库是否连接成功！');
        $('#comment-modal').modal('hide');
      })

    }else{
      alert('请输入文章标题');
    }

  })

  //删除
  $('.comment-table').on('click','.comment-delete',function(){
    var id = $(this).closest('tr').find('[type=checkbox]').val();
    var result = confirm('是否确定删除？');
    if(result){
      myAjax('/manager/comment/deleteCommentById','get',{ id:id },function(res){
        if(res.status == 200){
          alert('删除成功');        
          findPage();  
          findPage1();  
          console.log(id);
        }else{
          alert('删除失败，数据库的数据不可以删除哦！');
        }
      },function(err){
        alert('删除失败');
      })
    }
  })

  //批量删除
  $('#comment-batch-del').click(function(){
    //获取用户选中的复选框按钮的id，得到类数组
    var ids = $('.comment-table :checkbox:checked').map(function (index, item) {
      return item.value;
    }).toArray();
    //console.log(ids);
    if(ids.length>0){
      var result = confirm('是否确定删除？');
      if(result){
        //如果选中多个复选框，那么进行批量删除
        myAjax('/manager/comment/batchDeleteComment','post',{ ids: ids.toString()},function(res){
          if(res.status == 200){
            findPage();
            findPage1();
          }else{
            alert('批量删除失败！数据库的数据不可以删除');
            // 清空用户选择的checkbox
            $('.comment-table :checkbox:checked').prop('checked', false);
          }
        },function(err){
          alert('批量删除失败！数据库的数据不可以删除');
          // 清空用户选择的checkbox
          $('.comment-table :checkbox:checked').prop('checked', false);
        })
      }
    }else{
      alert('请勾选需要删除的数据');
    }
  })

</script>
